<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 - 二次元博客</title>
    <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#7B68EE',
                        secondary: '#FF69B4',
                        dark: '#1A1A2E',
                        light: '#F5F5F7',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            /* 流星动画样式优化 */
            .meteor {
                width: 1px;
                height: 100px;
                background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
                border-radius: 50%;
                transform-origin: top center;
                opacity: 0;
            }

            .meteor-1 { top: 10%; left: 20%; transform: rotate(-15deg); }
            .meteor-2 { top: 20%; left: 60%; transform: rotate(10deg); height: 80px; }
            .meteor-3 { top: 5%; left: 40%; transform: rotate(-5deg); height: 120px; }
            .meteor-4 { top: 30%; left: 80%; transform: rotate(-20deg); height: 90px; }
            .meteor-5 { top: 15%; left: 10%; transform: rotate(5deg); height: 70px; }

            @keyframes meteor {
                0% {
                    transform: rotate(var(--rotation)) translateY(-100%);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: rotate(var(--rotation)) translateY(100vh);
                    opacity: 0;
                }
            }

            .animate-meteor {
                animation: meteor 3s linear infinite;
            }

            /* 移动端看板娘层级优化 */
            @media (max-width: 768px) {
                #live2d-widget {
                    z-index: 9999 !important;
                    position: fixed !important;
                }
            }

            /* 新增样式 */
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .gradient-mask {
                mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            }
        }
    </style>

</head>


<body class="bg-dark text-light min-h-screen flex flex-col">
    <!-- 流星背景 -->
    <div class="fixed inset-0 z-0 overflow-hidden">
        <div class="meteor meteor-1 absolute animate-meteor" style="--rotation: -15deg; animation-delay: 0s;"></div>
        <div class="meteor meteor-2 absolute animate-meteor" style="--rotation: 10deg; animation-delay: 2s;"></div>
        <div class="meteor meteor-3 absolute animate-meteor" style="--rotation: -5deg; animation-delay: 4s;"></div>
        <div class="meteor meteor-4 absolute animate-meteor" style="--rotation: -20deg; animation-delay: 6s;"></div>
        <div class="meteor meteor-5 absolute animate-meteor" style="--rotation: 5deg; animation-delay: 8s;"></div>
    </div>
</body>
<body class="bg-light min-h-screen font-anime">
     <!-- 导航栏 -->
    <nav id="navbar" class="relative z-10 bg-dark/80 backdrop-blur-md py-3 px-6 md:px-12 transition-all duration-300">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-primary flex items-center">
                <i class="fa fa-pencil-square-o mr-2"></i>
                <span>二次元博客</span>
            </a>
           <div class="hidden md:flex items-center space-x-8">
                <a href="{% url 'index' %}" class="text-light hover:text-primary transition-colors duration-300">首页</a>
                <a href="#" class="text-light hover:text-primary transition-colors duration-300">专题合集</a>
                <a href="{% url 'hot' %}"class="text-light hover:text-primary transition-colors duration-300">热门</a>
                <a href="{% url 'about' %}" class="text-primary border-b-2 border-primary pb-1">关于</a>
            </div>
            <button class="md:hidden text-white text-xl" id="menuToggle">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-dark/95 backdrop-blur-md absolute w-full" id="mobileMenu">
             <div class="flex flex-col p-4 space-y-4">
                <a href="{% url 'index' %}" class="text-light hover:text-primary transition-colors duration-300 py-2">首页</a>
                <a href="#" class="text-light hover:text-primary transition-colors duration-300 py-2">专题合集</a>
                <a href="{% url 'hot' %}" class="text-light hover:text-primary transition-colors duration-300 py-2">热门</a>
                <a href="{% url 'about' %}" class="text-primary py-2">关于</a>
            </div>
        </div>
    </nav>
    <!-- 英雄区域（更新样式） -->
    <header class="pt-20 relative overflow-hidden">
        <div class="w-full h-[80vh] min-h-[600px] bg-gradient-to-br from-primary/50 to-dark/40 relative flex items-center justify-center">
    <!-- 装饰元素 -->
    <div class="absolute top-1/4 left-10 w-24 h-24 rounded-full bg-white/10 animate-float"></div>
    <div class="absolute bottom-1/3 right-20 w-32 h-32 rounded-full bg-secondary/20 animate-float" style="animation-delay: 1s"></div>
    <div class="absolute top-1/2 right-1/4 w-16 h-16 rounded-full bg-accent/20 animate-float" style="animation-delay: 2s"></div>

    <!-- 背景图 -->
    <div class="absolute inset-0 opacity-30">
        <img src="https://picsum.photos/id/325/1600/900" alt="二次元风景" class="w-full h-full object-cover">
    </div>

    <!-- 主标题 -->
    <div class="relative z-10 text-center px-4">
        <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 text-shadow animate-pulse-slow">
            二次元博客
        </h1>
        <p class="text-[clamp(1.2rem,3vw,1.8rem)] text-white max-w-3xl mx-auto mb-10 text-shadow">
            二次元爱好者的精神角落，分享动画、漫画与游戏的无限乐趣
        </p>
        <a href="#about" class="inline-block bg-white text-primary font-bold py-3 px-8 rounded-full transform transition-all hover:scale-105 hover:shadow-lg hover:shadow-primary/30">
            了解更多 <i class="fa fa-arrow-down ml-2"></i>
        </a>
    </div>

    <!-- 滚动提示 -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
        <i class="fa fa-angle-double-down text-3xl"></i>
    </div>
</div>
    </header>

    <main class="container mx-auto px-4 py-16">
        <!-- 关于我们（更新样式） -->
        <section id="about" class="mb-24 scroll-mt-20">
            <div class="max-w-5xl mx-auto">
                <div class="bg-white p-8 md:p-12 rounded-xl shadow-lg">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] text-primary font-bold mb-6 text-center">关于我们</h2>

                    <div class="flex flex-col md:flex-row gap-8 items-center">
                        <div class="md:w-1/3">
                            <div class="relative">
                                <img src="https://picsum.photos/id/237/600/600" alt="二次元社区" class="rounded-xl shadow-md w-full h-auto">
                                <div class="absolute -top-4 -right-4 bg-secondary text-white text-sm font-bold py-1 px-3 rounded-full transform rotate-12 animate-pulse">
                                    成立于2018年
                                </div>
                            </div>
                        </div>

                        <div class="md:w-2/3">
                            <p class="text-lg mb-4">
                                2018年某个被《紫罗兰永恒花园》赚走眼泪的深夜，三个抱着泡面的阿宅突然觉得：该有个地方，让所有热爱二次元的人能痛快聊聊那些藏在心底的感动与吐槽。
                            </p>
                            <p class="text-lg mb-6">
                                于是，这个博客就像一颗被埋下的时间胶囊，从最初的几篇漫评，慢慢长成了如今10w+同好聚集的次元社区。我们不是专业的影评人，也不是考据党大佬，只是一群会为角色命运哭到鼻塞、为神级分镜疯狂截图的普通人。
                            </p>

                            <!-- 数据卡片 -->
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
                                <div class="bg-primary/10 rounded-lg p-4 text-center card-hover">
                                    <div class="text-3xl font-bold text-primary mb-1">12k+</div>
                                    <div class="text-sm">原创内容</div>
                                </div>
                                <div class="bg-secondary/10 rounded-lg p-4 text-center card-hover">
                                    <div class="text-3xl font-bold text-secondary mb-1">3k+</div>
                                    <div class="text-sm">活跃创作者</div>
                                </div>
                                <div class="bg-accent/10 rounded-lg p-4 text-center card-hover">
                                    <div class="text-3xl font-bold text-accent mb-1">200+</div>
                                    <div class="text-sm">动漫IP</div>
                                </div>
                                <div class="bg-dark/10 rounded-lg p-4 text-center card-hover">
                                    <div class="text-3xl font-bold text-dark mb-1">12</div>
                                    <div class="text-sm">年度活动</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容分类（更新样式） -->
        <section id="content" class="mb-24 scroll-mt-20">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] text-primary font-bold mb-2 text-center">我们的内容</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">从新番吐槽到深度解析，从同人创作到周边测评，这里有你想要的一切二次元内容</p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 内容卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/111/600/400" alt="新番雷达" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center mb-3">
                            <span class="text-2xl text-primary mr-2"><i class="fa fa-television"></i></span>
                            <h3 class="text-xl font-bold">新番雷达站</h3>
                        </div>
                        <p class="text-gray-600 text-sm">每周更新的追番指南，帮你避开"烂片雷区"，精准锁定黑马佳作。从战斗美学到治愈日常，不错过任何精彩。</p>
                    </div>
                </div>

                <!-- 内容卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/24/600/400" alt="老宅档案" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center mb-3">
                            <span class="text-2xl text-secondary mr-2"><i class="fa fa-book"></i></span>
                            <h3 class="text-xl font-bold">老宅档案馆</h3>
                        </div>
                        <p class="text-gray-600 text-sm">90年代经典动画解析、隐藏剧情挖掘、连载多年作品的时间线梳理，那些被时光尘封的记忆都在这里。</p>
                    </div>
                </div>

                <!-- 内容卡片3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/96/600/400" alt="同人创作" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center mb-3">
                            <span class="text-2xl text-accent mr-2"><i class="fa fa-paint-brush"></i></span>
                            <h3 class="text-xl font-bold">同人创作坊</h3>
                        </div>
                        <p class="text-gray-600 text-sm">cosplay正片、手书动画、梗图创作、游戏攻略，只要是你用心制作的内容，都能在这里收获掌声。</p>
                    </div>
                </div>

                <!-- 内容卡片4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/65/600/400" alt="吐槽大会" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5">
                        <div class="flex items-center mb-3">
                            <span class="text-2xl text-dark mr-2"><i class="fa fa-comment"></i></span>
                            <h3 class="text-xl font-bold">吐槽大会</h3>
                        </div>
                        <p class="text-gray-600 text-sm">剧情崩坏、人设塌房、制作组摆烂？来这里尽情开麦！我们的评论区永远比正文更精彩，快乐加倍！</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社区特色（更新样式） -->
        <section id="community" class="mb-24 scroll-mt-20">
            <div class="max-w-5xl mx-auto">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] text-primary font-bold mb-2 text-center">社区特色</h2>
                <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">这里不止是博客，更是二次元爱好者的大家庭</p>

                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex flex-col md:flex-row gap-8 items-center mb-12">
                        <div class="md:w-1/2">
                            <h3 class="text-2xl font-bold text-secondary mb-4">没有鄙视链的友好氛围</h3>
                            <p class="mb-4">无论你是刚入圈的萌新，还是追番十年的老宅，都能找到聊得来的人。这里没有"婆罗门"的优越感，只有"我懂你"的默契与共鸣。</p>
                            <p>我们相信，每一种热爱都值得尊重，每一个观点都应该被倾听。</p>
                        </div>
                        <div class="md:w-1/2">
                            <div class="bg-light p-6 border border-gray-200 rounded-lg shadow-sm">
                                <p class="italic">"楼主居然也注意到这个细节！我还以为只有我一个人发现了呢！"</p>
                                <p class="text-right mt-2 text-sm text-gray-500">—— 来自评论区的同好</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row-reverse gap-8 items-center">
                        <div class="md:w-1/2">
                            <h3 class="text-2xl font-bold text-accent mb-4">丰富的线上线下活动</h3>
                            <p class="mb-4">从"夏日番剧吐槽大赛"到"年度动漫角色评选"，我们每月都有精彩活动。更有不定期的线下漫展组团、主题观影会等你参加。</p>
                            <p>在这里，你不仅能线上交流，更能认识现实中的同好，一起分享二次元的快乐。</p>
                        </div>
                        <div class="md:w-1/2 grid grid-cols-2 gap-4">
                            <img src="https://picsum.photos/id/26/300/300" alt="漫展活动" class="rounded-lg shadow-sm">
                            <img src="https://picsum.photos/id/42/300/300" alt="线下聚会" class="rounded-lg shadow-sm mt-6">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 加入我们（更新样式） -->
        <section id="join" class="scroll-mt-20">
            <div class="max-w-4xl mx-auto">
                <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl overflow-hidden shadow-xl">
                    <div class="p-8 md:p-12 text-white">
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6 text-center">加入我们</h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                            <div class="bg-white/10 backdrop-blur-sm p-6 rounded-lg card-hover">
                                <div class="text-center mb-4">
                                    <span class="inline-block bg-white text-primary w-14 h-14 rounded-full flex items-center justify-center text-2xl mb-2">
                                        <i class="fa fa-search"></i>
                                    </span>
                                    <h3 class="text-xl font-bold">开始探索</h3>
                                </div>
                                <p class="text-center">立即浏览本周热门内容，从新番解析到游戏攻略，总有一款适合你。</p>
                                <div class="text-center mt-6">
                                    <a href="#" class="inline-block bg-white text-primary font-bold py-2 px-6 rounded-full transform transition hover:scale-105">
                                        浏览内容
                                    </a>
                                </div>
                            </div>

                            <div class="bg-white/10 backdrop-blur-sm p-6 rounded-lg card-hover">
                                <div class="text-center mb-4">
                                    <span class="inline-block bg-white text-secondary w-14 h-14 rounded-full flex items-center justify-center text-2xl mb-2">
                                        <i class="fa fa-pencil"></i>
                                    </span>
                                    <h3 class="text-xl font-bold">成为创作者</h3>
                                </div>
                                <p class="text-center">不需要华丽的辞藻，只要你敢说、敢画、敢分享，这里就是你的舞台。</p>
                                <div class="text-center mt-6">
                                    <a href="#" class="inline-block bg-white text-secondary font-bold py-2 px-6 rounded-full transform transition hover:scale-105">
                                        投稿指南
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="text-center">
                            <h3 class="text-xl font-bold mb-4">加入官方社群</h3>
                            <p class="mb-6">扫描下方二维码加入粉丝群，和群友一起蹲更新、抢周边、线下面基</p>

                            <div class="flex justify-center">
                                <div class="bg-white p-4 rounded-lg inline-block shadow-lg">
                                    <img src="https://picsum.photos/id/180/200/200" alt="官方二维码" class="w-48 h-48">
                                </div>
                            </div>
                            <p class="text-sm mt-4 opacity-80">群里每天都有表情包大战，慎入！</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script>
         // 移动端菜单切换
        const menuToggle = document.getElementById('menuToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-lg', 'shadow-primary/10');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2', 'shadow-lg', 'shadow-primary/10');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>